<template>
    <div class="blogArticle">
        <Header></Header>
        <div class="blogArticle-main">
            <div class="blogArticle-l">
                <div class="card" v-if="loading">
                    <el-skeleton :rows="15" animated />
                </div>
                <div class="card card-bg">
                    <div class="card-title">{{ articleInfo.title }}</div>
                    <div class="info">
                        <div class="author">
                            <el-avatar :size="35" :src="articleInfo.avatar"></el-avatar>
                            <div class="nickname">{{ articleInfo.nickName }}</div>
                            <div class="nickname">
                                <el-blogTag size="mini" v-for="citem, index in articleInfo.tags" :key="index"
                                    class="bottom-blogTag">
                                    {{tagList.find(item => parseInt(item.id) === parseInt(citem)).name}}
                                </el-blogTag>
                            </div>
                        </div>
                        <div class="op">
                            <div class="iconfont icon-liulanliang">{{ articleInfo.viewsCount }}</div>
                            <div class="iconfont icon-dianzan">{{ articleInfo.likeCount }}</div>
                            <div class="iconfont icon-pinglun">{{ articleInfo.commentCount }}</div>
                            <div class="iconfont icon-shoucang">{{ articleInfo.collectCount }}</div>
                            <div class="iconfont icon-shijian">{{ articleInfo.createTime }}</div>
                        </div>
                    </div>
                    <div class="card-content ck-content" v-html="articleInfo.htmlContent" v-highlight>
                    </div>
                </div>
            </div>
            <div class="blogArticle-r">
                <div class="catalog">
                    <div class="cata-title" v-if="showDirectory"><span>目录</span></div>
                    <el-skeleton :rows="5" animated v-if="loading" />
                    <side-catalog v-bind="catalogProps" v-if="showDirectory"></side-catalog>
                    <div class="op-card">
                        <div class="iconfont icon-dianzan"></div>
                        <div class="iconfont icon-shoucang"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SideCatalog from 'vue-side-catalog';
import 'vue-side-catalog/lib/vue-side-catalog.css';
import Header from '../components/header/index.vue';
import { getFrontArticle } from '@/api/blog/blogArticle';
import { listFrontTag } from '@/api/blog/blogTag';

export default {
    name: 'blog-blogArticle',
    components: {
        SideCatalog,
        Header
    },
    data() {
        return {
            articleInfo: {},
            loading: false,
            showDirectory: true,
            catalogProps: {
                container: '.ck-content',
                watch: true,
                levelList: ["h2", "h3"],
            },
            tagList: []
        }
    },
    mounted() {
        this.getTagList();
        this.getArticleInfo();
    },
    methods: {
        getTagList() {
            listFrontTag().then((res) => {
                this.tagList = res.rows;
            })
        },
        getArticleInfo() {
            this.loading = true;
            getFrontArticle(this.$route.params.articleId).then((res) => {
                this.articleInfo = res.data;
                this.loading = false;
                this.showDirectory = true;
            })
        }
    }

}
</script>

<style scoped>
.blogArticle {
    background-color: rgb(241, 242, 245);
}

.blogArticle-main {
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.card {
    border-radius: 8px;
    background-color: white;
    padding: 30px;
}

.card-bg {
    background-image: linear-gradient(90deg, rgba(50, 0, 0, .05) 3%, transparent 0), linear-gradient(1turn, rgba(50, 0, 0, .05) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;
}

.blogArticle-l {
    width: 74%;
}

.blogArticle-r {
    width: 24%;
    position: relative;
}

.card-title {
    font-size: 28px;
    color: #333;
}

.info {
    display: flex;
    justify-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.catalog {
    position: fixed;
    background-color: white;
    width: 288px;
    border-radius: 8px;
}

.op-card {
    padding: 10px 1.667rem;
    color: #252933;
    border-top: 1px solid #e4e6eb;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.op-card .iconfont {
    font-size: 20px;
    cursor: pointer;
}

.op {
    display: flex;
    align-items: center;
}

.op div {
    margin-left: 20px;
}

.author {
    display: flex;
    align-items: center;
}

.nickname {
    margin-left: 10px;
    color: rgb(69, 66, 66);
}

.card-content {
    line-height: 1.8;
    font-size: 16px;
    text-align: justify;
}

.cata-title {
    font-size: 17px;
    padding: 10px 1.667rem;
    color: #252933;
    border-bottom: 1px solid #e4e6eb;
}

::v-deep .side-catalog {
    max-height: 400px !important;
}

.bottom-blogTag {
    margin-right: 10px;
}

@media screen and (max-width: 1000px) {
    .blogArticle-main {
        width: 100%;
        padding: 10px 0;
    }

    .blogArticle-r {
        display: none;
    }

    .blogArticle-l {
        width: 95%;
        margin: 0 auto;
    }

    .op {
        display: none;
    }

    .card {
        padding: 10px;
    }

    .card-content {
        font-size: 14px;
    }

}
</style>
